<as-split unit="percent" [direction]="splitDirection" [gutterSize]="9">
  <as-split-area #directiveForestSplitArea size="60">
    <as-split direction="vertical" [gutterSize]="9" unit="pixel" [disabled]="true">
      <as-split-area size="*">
        <ng-directive-forest
          (selectNode)="handleNodeSelection($event)"
          (selectDomElement)="handleSelectDomElement($event)"
          (setParents)="handleSetParents($event)"
          (highlightComponent)="highlightComponent($event)"
          (removeComponentHighlight)="removeComponentHighlight()"
          (toggleInspector)="toggleInspector.emit()"
          [forest]="forest"
          [currentSelectedElement]="currentSelectedElement"
          [showCommentNodes]="showCommentNodes"
        ></ng-directive-forest>
      </as-split-area>
      <as-split-area size="22">
        <ng-breadcrumbs
          (mouseLeaveNode)="unhighlight()"
          (mouseOverNode)="highlight($event)"
          *ngIf="parents"
          (handleSelect)="handleSelect($event)"
          [parents]="parents"
        >
        </ng-breadcrumbs>
      </as-split-area>
    </as-split>
  </as-split-area>
  <as-split-area size="40" minSize="25">
    <div class="property-tab-wrapper">
      <ng-property-tab
        [currentSelectedElement]="currentSelectedElement"
        (inspect)="inspect($event)"
        (viewSource)="viewSource()"
      ></ng-property-tab>
    </div>
  </as-split-area>
</as-split>
